<template>
  <div class="container">
    <div class="container-filter">
      <div class="container-filter-left">
        <el-input
          pre-icon="search"
          v-model="state.searchVal"
          placeholder="请输入标题"
          clearable
          @clear="getTableList(state.page, state.pageSize)"
        >
          <template #append>
            <el-button @click="searchBtn" icon="Search" />
          </template>
        </el-input>
      </div>
      <div class="container-filter-right">
        <el-button @click="handleAdd" icon="plus" type="primary">新增</el-button>
      </div>
    </div>
    <div class="container-content">
      <el-table border :data="state.list" align-center :row-class-name="tableRowClassName">
        <el-table-column label="序号" width="70">
          <template #default="scope">
            <span style="color: var(--el-color-primary)">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="content">
          <template #header>
            <div style="display: flex; align-items: center">
              <span style="margin-right: 5px">内容</span>
              <el-tooltip content="用户输入问题时，AI情报助手将以此为附加条件输出答案" effect="light">
                <el-icon><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" icon="edit" @click="handleEdit(scope.row._id)">修改</el-button>
            <el-button type="danger" icon="delete" @click="handleDel(scope.row._id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 15px">
        <el-pagination
          background
          layout="total,  prev, pager, next"
          :total="state.total"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!--NOTE(@date:2023-12-14 11:56:36 谭人杰): 标题修改-->
    <!--NOTE(@date:2024-1-4 10:30:36 陈谦): 弹框修改-->
    <el-dialog
      v-model="state.dialog_conf.visiable"
      :title="state.dialog_conf.title"
      :destroy-on-close="state.dialog_conf.isDestory"
      :draggable="state.dialog_conf.draggable"
      :close-on-click-modal="state.dialog_conf.closeOnClickModal"
    >
      <el-form :model="state.form">
        <el-form-item class="must-fill" label="标题">
          <el-input v-model="state.form.title" clearable placeholder="请输入标题" />
        </el-form-item>
        <el-form-item class="must-fill" label="内容">
          <el-input v-model="state.form.content" clearable placeholder="内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.dialog_conf.visiable = false">取消</el-button>
          <el-button type="primary" @click="submit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
// import { getRandomChineseWord, getRandomString, lan_opt } from "@/utils/mock-data/index.js"
import { reactive, onMounted } from "vue"
import { ElMessage, ElMessageBox } from "element-plus"
import { getData, searchData, delData, updateData, createData } from "@/api/prompt/index"
// NOTE(@date:2024-1-3 17:43:36 陈谦): 接口调用
const state = reactive({
  list: [],
  page: 1,
  pageSize: 10,
  total: 0,
  searchVal: "",
  form: { title: "", content: "" },
  upId: "",
  dialog_conf: {
    visiable: false,
    title: "编辑",
    isDestory: false, //关闭前销毁
    draggable: true, //拖拽
    closeOnClickModal: false
  }
})

const getTableList = (page: number, pageSize: number) => {
  getData(page, pageSize)
    .then((res: any) => {
      if (res.code == 200) {
        state.list = res.data.list
        state.total = res.data.total
      }
    })
    .catch((err: any) => {
      console.log(err)
    })
}

const handleCurrentChange = (val: any) => {
  state.page = val
  getTableList(val, state.pageSize)
}

const searchBtn = () => {
  searchData("title", state.searchVal).then((res: any) => {
    if (res.code == 200) {
      state.list = res.data
    }
  })
}

const submit = () => {
  const { title } = state.dialog_conf
  if (title == "新增") addData()
  else upData()
}

const tableRowClassName = (rowIndex: number) => {
  if (rowIndex % 2 != 0) {
    return "warning-row"
  } else {
    return "success-row"
  }
}

const handleAdd = () => {
  state.dialog_conf.title = "新增"
  state.dialog_conf.visiable = true
  state.upId = ""
  state.form = { title: "", content: "" }
}

const handleEdit = (id: string) => {
  state.dialog_conf.title = "编辑"
  state.dialog_conf.visiable = true
  if (id) {
    state.upId = id
    searchData("id", id).then((res: any) => {
      if (res.code == 200) {
        state.form = res.data[0]
      }
    })
  }
}

const addData = () => {
  createData(state.form).then((res: any) => {
    if (res.code == 200) {
      getTableList(state.page, state.pageSize)
      state.dialog_conf.visiable = false
      ElMessage({
        type: "success",
        message: `操作成功`
      })
    } else {
      ElMessage({
        type: "warning",
        message: `操作失败`
      })
    }
  })
}

const upData = () => {
  updateData(state.upId, JSON.stringify(state.form)).then((res: any) => {
    if (res.code == 200) {
      getTableList(state.page, state.pageSize)
      state.dialog_conf.visiable = false
      ElMessage({
        type: "success",
        message: `操作成功`
      })
    } else {
      ElMessage({
        type: "warning",
        message: `操作失败`
      })
    }
  })
}

const handleDel = (id: string) => {
  delData(id).then((res: any) => {
    ElMessageBox.confirm("确认删除？", "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      draggable: true
    }).then(() => {
      if (res.code == 200) {
        getTableList(state.page, state.pageSize)
        ElMessage({
          type: "success",
          message: `操作成功`
        })
      }
    })
  })
}

onMounted(() => {
  getTableList(state.page, state.pageSize)
})
</script>

<style lang="scss" scoped>
.fy_title {
  margin-bottom: 15px;
  width: 100%;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.input {
  :deep(.el-textarea__inner) {
    height: 700px !important;
  }
}
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
